<template>
  <div class="home">
    <my-header></my-header>
    <!-- 头部子组件 -->
    <myTab :list="tabList" @homeChange="homeChange" />
    <!-- tab切换导航子组件  父传子把导航数据传过去-->
    <myCard
      v-for="item in conList"
      :key="item.id"
      :item="item"
      @click="gotoDetail(item.id)"
    />
    <!-- 列表子组件 封装的是单个商品 循环这个子组件 把item传到子组件里  -->

    <!-- 如果要给子组件用原生的事件的时候 vue2的时候要加上.native 子组件才能识别这是一个原生事件而不是一个自定义事件 vue3中不需要加native就可以-->

    <p class="to-top" @click="toTop">
      <!-- <a href="#"> 回到顶部</a> -->
      回到顶部
    </p>
  </div>
</template>

<script>
import myHeader from "../components/myHeader.vue";
import myTab from "../components/myTab.vue";
import myCard from "../components/myCard.vue";
//引入三个子组件
import { ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";

//引入组合api需要的各种定义变量的以及vuex和路由方法

import { getList } from "../utils/cnode";

//引入请求列表的封装的方法

export default {
  name: "Home",
  components: {
    myHeader,
    myTab,
    myCard,
  },
  //注册子组件

  setup(props, ctx) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const data = reactive({
      tabList: [
        {
          name: "全部",
          desc: "all",
        },
        {
          name: "问答",
          desc: "ask",
        },
        {
          name: "分享",
          desc: "share",
        },
        {
          name: "招聘",
          desc: "job",
        },
        {
          name: "精华",
          desc: "good",
        },
      ],
      //tab切换的数据
      conList: [],
      //请求到的展示列表的数据
    });

    const homeChange = (desc) => {
      console.log("我会在这里请求不同tab的数据", desc);
      getList({ tab: desc }).then((res) => {
        console.log(res);
        data.conList = res.data;
      });
    };
    //其实是在子组件tab触发的点击事件 用子传父在父组件请求数据 子传父传的就是当前点击的tab 的 item

    homeChange(store.state.tab);
    //进入页面展示 之前存在vuex里的tab数据 实现了刷新数据还在之前的tab上

    const toTop = () => {
      // console.log(document.documentElement.scrollTop);
      let num = document.documentElement.scrollTop;
      //获取初始的卷进去的距离
      let timer = null;
      timer = setInterval(() => {
        num -= 10;
        if (num <= 0) {
          num = 0;
          clearInterval(timer);
        }
        document.documentElement.scrollTop = num;
      }, 10);
    };
    //自己用计时器实现缓慢的回到顶部效果

    const gotoDetail = (id) => {
      router.push("/about/" + id);
    };
    //跳转详情页
    return { ...toRefs(data), homeChange, toTop, gotoDetail };
  },
};
</script>
<style lang="scss" scoped>
.to-top {
  background: greenyellow;
  position: fixed;
  bottom: 30px;
  right: 0px;
}
</style>
